﻿<head>
    <script src="~/lib/vue/dist/vue.global.js"></script>
    <link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
    <script src="~/lib/element-plus/dist/index.full.js"></script>
    <script src="~/lib/axios/dist/axios.js"></script>
    <link href="~/css/table.css" rel="stylesheet" />
</head>
<div id="app">
    <table width="100%">
        <tr>
            <td>
                <p color="black">
                    您正在做的业务是:人力资源管理--薪酬发放管理--薪酬发放登记审核
                </p>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
        </tr>
    </table>

    <el-table :data="tableData" :header-cell-style="{background:'#FFDB6F',color:'#606266'}">
        <el-table-column prop="salaryGrantId" label="薪酬发放编号"></el-table-column>
        <el-table-column prop="firstKindName" label="一级机构名称"></el-table-column>
        <el-table-column prop="secondKindName" label="二级机构名称"></el-table-column>
        <el-table-column prop="thirdKindName" label="三级机构名称"></el-table-column>
        <el-table-column prop="humanAmount" label="人数"></el-table-column>
        <el-table-column prop="salaryStandardSum" label="基本薪酬总额(元)	">
            <template #default="scope">
                {{ formattedTotalSalarySum(scope.row.salaryStandardSum) }}
            </template>
        </el-table-column>
        <el-table-column label="复核">
            <template #default="scope">
                <el-button size="" v-on:click="handleEdit(scope.row)">复核</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                   :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="rows"
                   v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange">

    </el-pagination>
</div>

<script>
    var { createApp, reactive, ref } = Vue
    var app = createApp({
        setup() {
            const rows = ref(0);
            const currentPage = ref(1);
            const pageSize = ref(5);
            const isUse = ref(false);
            let tableData = ref([])

            //分页查询SGD表
            const fetchData = () => {
                axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
                axios.post('/SGFenYe', {
                    page: currentPage.value,
                    pageSize: pageSize.value
                })
                    .then(res => {
                        tableData.value = res.data.sg;
                        rows.value = res.data.totalRecords;
                        console.log(res.data.ss)
                    })
            };

            // 处理每页显示数量变化
            const handleSizeChange = (size) => {
                pageSize.value = size;
                fetchData();
                isUse.value = true;
            };

            // 处理当前页变化
            const handleCurrentChange = (cpage) => {
                currentPage.value = cpage;
                fetchData();
                isUse.value = true;
            };

            function handleEdit(row) {
                const queryParams = new URLSearchParams();
                queryParams.set('rowData', JSON.stringify(row));
                window.location.href = `/PayrollCheck/Index1?${queryParams.toString()}`;
            }
            //格式化金额
            function formattedTotalSalarySum(num) {
                return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(num);
            }
            fetchData();
            return {
                tableData,
                currentPage,
                pageSize,
                rows,
                isUse,
                handleSizeChange,
                handleCurrentChange,
                handleEdit,
                formattedTotalSalarySum
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");

</script>
<style type="text/css">
    body {
        background-color: #FFFFBB;
        border: 1px solid #FFDB6F;
        display: block;
        margin: 8px;
    }

</style>


